<template>
	<view class="mainpadding">
		<u-navbar :placeholder="true">
			<view class="flexleft" slot="left" style="width: 100%;">
				<u-icon name="arrow-left" size="20" @click="backpage" color="#333"></u-icon>
				<view class="flexleft margin_left3 ssousuobox1">
					<view class="margin_right2">
						<u-icon name="search" color="#999999" size="28"></u-icon>
					</view>
					<input type="text" placeholder="输入商品搜索" v-model="ss_content" confirm-type="search"
						@confirm="tzspss">
				</view>
			</view>
			<view class="ershiba xiaohei" slot="right" @click="backpage" v-show="ss_content==''">取消</view>
			<view class="ershiba xiaohei" slot="right" @click="tzspss" v-show="ss_content!=''">搜索</view>
		</u-navbar>
		<view class="flexbetween margin_top" v-if="ss_ls.length">
			<view class="titletext xiaohei">历史记录</view>
			<u-icon name="trash" size="20" @click="empty"></u-icon>
		</view>
		<view class="flex_wrap flexleft">
			<view class="subtn margin_top margin_right2" v-for="(item, index) in ss_ls" :key="index"
				@click="clickssls(item)">{{item}}</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				ss_ls: [],
				ss_content: "",
				
			}
		},
		onLoad() {
			let list = uni.getStorageSync("searchList");
			this.ss_ls = JSON.parse(list);
		},
		methods: {
			clickssls(item) {
				this.ss_content = item
				this.tzspss()
			},
			// 跳转商品搜索
			tzspss() {
				let _this = this
				if (_this.ss_content == '') {
					httpRequest.toast('请输入输入内容');
					return false
				} else {
					if (!_this.ss_ls.includes(_this.ss_content)) {
						_this.ss_ls.unshift(_this.ss_content);
						uni.setStorage({
							key: 'searchList',
							data: JSON.stringify(_this.ss_ls)
						});
					} else {
						//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
						let i = _this.ss_ls.indexOf(_this.ss_content);
						_this.ss_ls.splice(i, 1);
						_this.ss_ls.unshift(_this.ss_content);
						uni.setStorage({
							key: 'searchList',
							data: JSON.stringify(_this.ss_ls)
						});
					}
				}
				uni.navigateTo({
					url: '/pages_homepage/sousuojg?text=' + _this.ss_content
				})
				// _this.ss_content = ""
			},
			//清空历史记录
			empty() {
				httpRequest.toast('已清空');
				uni.removeStorage({
					key: 'searchList'
				});

				this.ss_ls = [];
			},
			// 跳转搜索结果
			backpage() {
				uni.navigateBack(1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.subtn {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		padding: 10rpx 25rpx;
		background: #F8F8F8;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
	}

	.ssousuobox1 {
		background-color: #f6f6f6;
		width: 100%;
		border-radius: 36rpx;
		padding: 10rpx 30rpx;
	}
</style>